#{extends 'main.html' /} #{set title:'tutPage.html' /}
<head>

<style type="text/css">
#menu



ul



</
body
>
{
margin




:



0;
padding




:



0;
list-style-type



:




none



;
text-align




:




center




;
}
#menu ul li {
	display: inline;
}

#menu ul li a {
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #036;
}

#menu ul li a:hover {
	color: #fff;
	background-color: #369;
}
</style>

</head>

<body>
	<!-- Start Rana Amr 
The tutorial's title, content and creator'name are displayed here.
@author Rana Amr
@param -->

	#{if session.get("RegisteredUserId") != null} Created By:
	<a href="/Application/othersProfile?viewOthers=${tutorial.creator.id}">${tutorial.creator.name}</a>
	#{/if} #{else} Created By: ${tutorial.creator.name} #{/else}
	<br>
	<br> ${tutorial.Title}
	<br>
	${tutorial.getSummary().raw()}
	<br>
	<span>${tutorial.content.raw()}</span>

	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<!-- End Rana Amr -->

	<div id="menu">
		<ul>
			<!-- Start Mohamed Ragab 
this section i used java script to do methods "increase_image_Width", "decrese_image_Width", 
"increase_image_Height", "decrese_image_Height", to modify the the size of the media files uploaded 
in the tutorial page
@author Mohamed Ragab
@param id from the 4 methods -->

			<script language="javascript">
   var x=100;
   var i =1;
      function increase_image_Width(id)
      { i++;
        var img = document.getElementById(id);

        img.width = x+i*50;
     
        
      }
    
    
       function decrese_image_Width(id)
      { i--;
        var img = document.getElementById(id);

        img.width = x+i*50;
        
        
      }
       function increase_image_Height(id)
       { i++;
         var img = document.getElementById(id);

        img.height = x+i*50;;
         
       }
     
     
        function decrese_image_Height(id)
       { i--;
         var img = document.getElementById(id);

        img.height = x+i*50;;
         
       }
    </script>

			<!-- in this section i return the media files for each tutorial and check the type of the file if it
image or video or audio, and each types has it own viewing shapes, here the user can resize the 
media files depending on the previous java script methods 
@author Mohamed Ragab -->

			#{list items:controllers.Tutorials.findUploads(tutorial.id),
			as:'RegisteredUser'} #{if RegisteredUser.type =="image"}

			<a href="@{Application.photoDownload(RegisteredUser.id)}">DOWNLOAD</a>
			<BR>
			<img id="${RegisteredUser.id}"
				src="@{Application.userPhoto(RegisteredUser.id)}" WIDTH="500"
				HEIGHT="400">
			<br>

			<h3>Modify image Width</h3>
			<input class="button"
				onclick="decrese_image_Width(${RegisteredUser.id})" type="button"
				value="-">
			<input class="button"
				onclick="increase_image_Width(${RegisteredUser.id})" type="button"
				value="+">

			<h3>Modify image Height</h3>
			<input class="button"
				onclick="decrese_image_Height(${RegisteredUser.id})" type="button"
				value="-">
			<input class="button"
				onclick="increase_image_Height(${RegisteredUser.id})" type="button"
				value="+">


			<br>
			<br>
			<br> #{/if} #{if RegisteredUser.type =="audio"}

			<a href="@{Application.photoDownload(RegisteredUser.id)}">DOWNLOAD</a>
			<BR>
			<embed id="${RegisteredUser.id}"
				src="@{Application.userPhoto(RegisteredUser.id)}" width="200"
				height="50" width="200" height="200"
				autostart="${RegisteredUser.autoplay}" loop="FALSE">

			</embed>

			<h3>Modify Audio Width</h3>
			<input class="button"
				onclick="decrese_image_Width(${RegisteredUser.id})" type="button"
				value="-">
			<input class="button"
				onclick="increase_image_Width(${RegisteredUser.id})" type="button"
				value="+">

			<h3>Modify Audio Height</h3>
			<input class="button"
				onclick="decrese_image_Height(${RegisteredUser.id})" type="button"
				value="-">
			<input class="button"
				onclick="increase_image_Height(${RegisteredUser.id})" type="button"
				value="+">


			<br>
			<br>
			<br> #{/if} #{if RegisteredUser.type =="video"}

			<a href="@{Application.photoDownload(RegisteredUser.id)}">DOWNLOAD</a>
			<BR>
			<EMBED id="${RegisteredUser.id}"
				SRC="@{Application.userPhoto(RegisteredUser.id)}" WIDTH="500"
				HEIGHT="400" AUTOPLAY="${RegisteredUser.autoplay}" LOOP="false"></EMBED>

			<h3>Modify Video Width</h3>
			<input class="button"
				onclick="decrese_image_Width(${RegisteredUser.id})" type="button"
				value="-">
			<input class="button"
				onclick="increase_image_Width(${RegisteredUser.id})" type="button"
				value="+">

			<h3>Modify Video Height</h3>
			<input class="button"
				onclick="decrese_image_Height(${RegisteredUser.id})" type="button"
				value="-">
			<input class="button"
				onclick="increase_image_Height(${RegisteredUser.id})" type="button"
				value="+">


			<br>
			<br>
			<br> #{/if} #{/list}

			<!-- End Mohamed Ragab -->

			<br>
			<br>
			<br>
			<br>
			<br> 
			#{if session.get("RegisteredUserId") != null}
			<p style="font-size: 30px; color: blue;">Ratings</p>
			<!-- Start Rana A. Zakaria 
This is a drop down list that allows the user to rate a tutorial
@author Rana A. Zakaria
-->
			<font size="2.5" face="Calibri" color="blue">Click on the star
				& rate</font>
			<form action="@{Tutorials.rateTutorial()}" method="POST">
				<input type="hidden" name="tutorialId" value="${tutorial.id}">
				<select name="rate" id="mytype">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select> <input type="image"
					src="http://cdn1.iconfinder.com/data/icons/pretty_office_3/256/Star-Full.png"
					name="image" width="30" height="30">
				<!-- End Rana A. Zakaria -->

				<!-- Start Mayar
		 This line shows the average rate so far-->
				<form>
					<br> <br> <font size="4" face="Monotype Corsiva"
						color="blue">This is the average rating so far! </font>
					${tutorial.averageRate}

				</form>
				<!--End Mayar-->



			</form>

			<br>
			<br>

			<p style="font-size: 30px; color: blue;">Editing</p>
			<!--This button redirects to the editTutorial.html @author Haidy-->
			<form action="@{Tutorials.editTutorial()}" method="post">
				<a href="/Tutorials/editTutorial?tutorialId=${tutorial.id}"><input
					type="button" style="background-color: #036; color: white;"
					value="Edit This Tutorial" /> </a>
			</form>
			<br>
			<!--END Haidy-->


			<!-- Start Rana A. Zakaria 
This is a link that links the user to the editRequest page to enter his amendments
@author Rana A. Zakaria
-->
			<ul>
				<li><a href="@{Tutorials.editRequest(tutorial.id)}">Request
						to edit</a></li>
			</ul>
			<br>
			<!-- End Rana A. Zakaria -->

			<!-- Start Rana A. Zakaria 
This is a button that links the creator/contributor to view the edit requests
@author Rana A. Zakaria
-->
			<form action="@{Tutorials.viewEditRequests()}" method="GET">
				<button name="tutorialId" type="submit"
					style="background-color: #036; color: white;"
					value="${tutorial.id}">Show edit requests</button>
			</form>
			<!-- end Rana A. Zakaria -->

			<br>

			<p style="font-size: 30px; color: blue;">Follow or Add to
				Favourites</p>
			<!-- Marwa Elshenawy
This is a button that enables the user to follow a tutorial
@author Marwa Elshenawy -->
			<li><a href="@{Tutorials.followTut(tutorial.id)}">Follow</a></li>
			<br>
			<br>
			<!-- Marwa Elshenawy
This is a button that enables the user to add a tutorial to Favorites
@author Marwa Elshenawy -->
			<li><a href="@{Tutorials.addTutToFav(tutorial.id)}">Add To
					Favorites</a></li>

			<p style="font-size: 30px; color: blue;">Like</p>
			<!--Start Omnia Hassan -->
			<form action="@{Tutorials.likeTutorial(tutorial.id)}" method="POST">
				<!--End Omnia Hassan -->


				<!--Start Yasmine Abdelhady this shows the number of likes for the tutorial page open -->

				<input type="image"
					src="http://www.simplyzesty.com/wp-content/uploads/2012/04/facebook-like.jpg"
					name="image" width="46" height="33">${tutorial.likeCount}
			</form>

			<br>
			<!-- End Yasmine Abdelhady -->


			<!--START-----Omnia-->

			<p style="font-size: 30px; color: blue;">Become a Contributer</p>
			<ul>
				<li><a href="@{Tutorials.requestToContribute(tutorial.id)}">Request
						To Contribute</a></li>
			</ul>

			<!--end-----Omnia-->

			<p style="font-size: 30px; color: blue;">Relations</p>
			<!-- this methods calls the editRelation method
	    and redirect to the relation page of the current tutorial 
	@author Yasmin Gamal -->
			<ul>
				<li><a href="@{Tutorials.editRelation(tutorial.id)}">Edit
						OR Delete the relation </a></li>
			</ul>
			<br>

			<!-- this methods calls the relation page 
	    to redirect to do the relation for the page
	@author Yasmin Gamal -->
			<ul>
				<li><a href="@{Tutorials.relation(tutorial.id)}">Add new
						relation </a></li>
			</ul>
			<br>

			<!-- This is a button that enables the user to browse topics relations
@author shayma hesham  -->

			<!--start-----shaymaa-->
			<form action="@{Tutorials.browsRelations()}" method="POST">
				<a href="BrowsRelations"><input type="button"
					style="background-color: #036; color: white;"
					value="Browse Relations" /> </a>
			</form>
			<!--end-----shaymaa-->


			<!-- samar and hadeer -->
			<p style="font-size: 30px; color: blue;">Exercises</p>
			<form>
				<li><a href="@{Exercises.enterName(tutorial.id)}">Create a
						New Exercise</a></li> <br> <br>
				<li><a href="@{Exercises.chooseExercise(tutorial.id)}">View
						all Exercises</a></li>
			</form>
			<!-- end Samar Nassar and hadeer -->

			<p style="font-size: 30px; color: blue;">Review</p>
			<!-- This is a button that enables the user to viewreview
@author shayma hesham  -->

			<!--start-----shaymaa-->
			<form>
				<a href="@{Reviews.viewReview(tutorial.id)}"><input
					type="button" style="background-color: #036; color: white;"
					value="View Review" /> </a><br> <br>
			</form>
			<!--end-----shaymaa-->
			<!-- Mahmoud (Review button, is viewed only if tutorial is in draft mode) -->

			#{if tutorial.status == "draft"}
			<li><a href="@{Reviews.addReviewPage(uId,tutorial.id)}">Review
					this Tutorial !</a></li> #{/if}

			<!-- end Mahmoud -->


			<p style="font-size: 30px; color: blue;">Comments</p>
			<!-- Start Rana A. Zakaria 
This is a button that allows the users to see public comments and links
them to the page.
@author Rana A. Zakaria
-->
			<form action="@{Tutorials.viewPublicComments()}" method="GET">
				<button name="tutorialId" type="submit"
					style="background-color: #036; color: white;"
					value="${tutorial.id}">Show public comments</button>
			</form>
			<!-- End Rana A. Zakaria -->

			<!-- Start Rana A. Zakaria 
This is a button that allows the creator/contributors to see the public comments and 
links them to the page.
@author Rana A. Zakaria
-->
			<form action="@{Tutorials.viewPrivateComments()}" method="GET">
				<button name="tutorialId" type="submit"
					style="background-color: #036; color: white;"
					value="${tutorial.id}">Show private comments</button>
				<br>
			</form>
			<!-- End Rana A. Zakaria -->



			<!-- Start Rana A. Zakaria 
This is a text box where the users enter their comment, and is placed next to a drop
down list where he then chooses whether he wants to publish it as a private or a public
comment
@author Rana A. Zakaria
-->
			<form action="@{Tutorials.createComment()}" method="POST">
				<input type="hidden" name="tutorialId" value="${tutorial.id}">
				<input type="text" name="commentBody"
					style="WIDTH: 170px; HEIGHT: 70px"
					value="Please enter your comment.." onFocus="this.value=''" /> <select
					name="choice" id="mytype">
					<option>Public comment</option>
					<option>Private comment</option>
				</select> <input type="submit" style="background-color: #036; color: white;"
					value="Post" />
			</form>
			<!-- end Rana A. Zakaria -->



		</ul>
	</div>
	#{/if}
</body>